<template>
	<!-- m -->
	<view class="goods-box" style="
				display: flex;
				align-items: center;
				margin-top: 10px;
				flex-wrap: wrap;
			">
		<view class="mt10 goods-item" v-for="(item, index) in myData" @click="goodsdetail(item)" :class="(index+1)%2==0?'u-m-l-16':''">
			<view class="bga box bg">
				<image :src="item.image" mode="" style="width: 100%;height: 200rpx;"></image>
				<view style="
							display: flex;
							align-items: center;
							line-height: 30px;
						" class="f16">
					<view class="lianghang c3" style="padding-right: 10px">
						{{ item.project_name }}
					</view>
					<view style="margin-left: auto" @click.stop="profav(item.id)">
						<u-icon v-if="item.is_fav == 0" name="star" size="30"></u-icon>
						<u-icon v-else color="#ffe413" name="star-fill" size="30"></u-icon>
					</view>
				</view>
				<view class="f14 c6 lianghang">
					<view class="goodsCont" v-html="item.project_desc"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 *shoproGoodsCard - 单个项目卡片
 * @property {Object} detail - 项目详情
 * @property {String} type - 项目类型
 * @property {String} image - 商品图片
 * @property {String} title - 商品标题
 * @property {String} subtitle - 商品副标题
 * @property {String | Number} price - 商品价格
 * @property {String | Number} originPrice - 商品原价
 * @property {String | Number} sales - 商品销量
 * @property {Array} tagTextList - 活动标签
 * @event {Function} click 商品被点击
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
		};
	},
	computed: {
	},
	props: {
		myData: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	methods: {
		//点击商品
		goodsdetail(id) {
			this.$emit('goodsdetail',id);
		},
		// 收藏
		profav(id) {
			let formData = {
				project_id: id,
			};
			this.$new_http('newuser.profav',formData).then(res => {
				res.data.forEach((item)=>{
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon : "none",
						});
					}
				})
			});
		},
	}
};
</script>

<style lang="scss">
//项目
.goods-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.goods-item {
	box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
	padding: 20rpx;
	border-radius: 20rpx;
	width: 48%;
	box-sizing: border-box;
	margin-bottom: 30rpx;
	height: 412rpx;
}

.goodsCont {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.scroll-tab {
	white-space: nowrap;
	/* 必要，导航栏才能横向*/
	border-bottom: 1rpx solid #eee;
	text-align: center;
}

.c3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
</style>
